<template>
  <div class="msite">
    <nav-bar class="navbar">
      <div slot="left" class="iconfont icon-sousuo"></div>
      <div slot="center" class="ellipsis">{{address.name || '正在定位中'}}</div>
      <div slot="right" class="login" @click="$router.push(user._id ? '/usercenter' : '/login')">{{user._id ? '个人中心' : '登录|注册'}}</div>
    </nav-bar>
    <!--首页导航-->
    <div class="msite_nav">
      <div class="swiper-container" ref="swiper_container">
        <div class="swiper-wrapper">
          <!-- 循环实现 多页的轮播图， 而state中提供的foodsList是一维数组，需要通过计算属性构建二位数组 -->
          <div class="swiper-slide" v-for="(food,index) in foodsArr" :key="index">
            <!-- 循环实现 一页中有8个分类 -->
            <a href="javascript:" class="link_to_food" v-for="(item, index) in food" :key="index">
              <div class="food_container">
                <img :src="'https://fuss10.elemecdn.com' + item.image_url" />
              </div>
              <span>{{item.title}}</span>
            </a>
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <!-- 商品列表 -->
    <shop-list></shop-list>
  </div>
</template>
<script>
// swiper
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
// 头部
import NavBar from "../../components/common/navbar/NavBar";
// 商品列表
import ShopList from "../../components/content/shoplist/ShopList";
// store
import { mapState } from "vuex";
export default {
  components: {
    NavBar,
    ShopList
  },
  computed: {
    // ...mapState(["address", "foodsList","user"]),
     ...mapState({
       address: state => state.msite.address,
       foodsList: state => state.msite.foodsList,
       user: state => state.user.user,
     }),

    /**
     * 食品分类的二位数组
     * 小数组最多只能存放8个
     * 小数组只需要往大数组中添加一次
     */

    foodsArr() {
      const bigArr = [];
      let smallArr = [];

      this.foodsList.forEach(item => {
        // 将小数组的内容存放到大数组中，且只存放一次【判断小数组是否为空，如果为空就需要往大数组中添加，如果小数组不为空，那么就不会往大数组中添加】
        if (smallArr.length === 0) {
          bigArr.push(smallArr);
        }

        smallArr.push(item);

        // 如果小数组已经有8个，那么需要创建一个新的小数组继续存放,不是将原来的小数组清空，是开辟新的空间存放，然后这个smallArr继续往bigArr里面存放内容
        if (smallArr.length === 8) {
          smallArr = [];
        }
      });

      return bigArr;
    }
  },
  mounted() {
    this.$store.dispatch("getAddress");
    this.$store.dispatch("getFoodsList");

    // setTimeout(() => {
    /* var mySwiper = new Swiper(this.$refs.swiper_container, {
        loop: true, // 循环模式选项
        autoplay: true,

        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination"
        }
      }); */
    // }, 1000);
  },
  watch: {
    foodsList() {
      this.$nextTick(function() {
        var mySwiper = new Swiper(this.$refs.swiper_container, {
          loop: true, // 循环模式选项
          autoplay: true,

          // 如果需要分页器
          pagination: {
            el: ".swiper-pagination"
          }
        });
      });
    }
  }
};
</script>
<style lang="less" scoped>
.msite {
  .navbar {
    background-color: #02a774;
    color: #fff;
    position: fixed;

    .icon-sousuo {
      position: absolute;
      left: 20px;
      top: 0;
      font-size: 25px;
    }

    .login {
      font-size: 12px;
    }
  }

  .msite_nav {
    position: relative;
    margin-top: 44px;
    height: 200px;
    background: #fff;

    &::before {
      content: "";
      position: absolute;
      z-index: 200;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background-color: #e4e4e4;
      transform: scaleY(0.5);
    }

    .swiper-container {
      width: 100%;
      height: 100%;

      .swiper-wrapper {
        width: 100%;
        height: 100%;

        .swiper-slide {
          display: flex;
          justify-content: center;
          align-items: flex-start;
          flex-wrap: wrap;

          .link_to_food {
            width: 25%;

            .food_container {
              display: block;
              width: 100%;
              text-align: center;
              padding-bottom: 10px;
              font-size: 0;

              img {
                display: inline-block;
                width: 50px;
                height: 50px;
              }
            }

            span {
              display: block;
              width: 100%;
              text-align: center;
              font-size: 13px;
              color: #666;
            }
          }
        }
      }

      .swiper-pagination > span.swiper-pagination-bullet-active {
        background: #02a774;
      }
    }
  }
}
</style>